<template>
  <el-select>
    <el-option
      v-for="opt in opts"
      :key="opt.value"
      :label="opt.label"
      :value="opt.value"
    ></el-option>
  </el-select>
</template>

<script lang="ts" setup>
  import { ElOption, ElSelect } from 'element-plus';
  import { SelectorOptions } from '../form';
  import { computed, inject } from 'vue';
  import { M2, m2InjectionKey } from '../../maker/structure';

  // console.log('remote');

  const m2: (() => M2) | undefined = inject(m2InjectionKey);

  // console.log(JSON.stringify(m2?.()?.models));

  const opts = computed<SelectorOptions>(() => {
    if (!m2) return [];
    return Object.values(m2().models || []).map((m) => ({
      label: m.label + '',
      value: m.name
    }));
  });
</script>

<style scoped></style>
